<template>
    <div class="scrollnav" :style="[{'top':top}]">
        <div @click="$emit('beCheck',item.check)" v-for="(item,index) in list" :key="index" :class="[{'active':topCheck == item.check},'title']">{{item.name}}</div>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        list: {
            type: Array,
            default: () => [
                
            ]
        },
        top: {
            type: String,
            default: '0'
        },
        topCheck: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {}
    },

    methods: {
        beCheck(num){
            this.$emit('beCheck',num)
        }
    },
    watch: {},
    mounted() {},
    created() {},
    computed: {}
}
</script>

<style scoped>
.scrollnav {
    height: 1rem;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    z-index: 98;
    background: #fff;
}
.title{
    height: 100%;
    line-height: 1rem;
    padding: 0 .2rem;
    font-size: .32rem
    /* border-bottom:solid 2px red */
}
.scrollnav .active{
    border-bottom: solid 2px rgba(190,35,40,1);
    color: rgba(190,35,40,1);
}
</style>